<template>
  <div>
    <div class="mb-3">
      <button type="button" class="btn btn-primary px-3" @click="openModal('add')">
        <i class="far fa-edit me-2"></i>新增
      </button>
    </div>
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th scope="col"></th>
          <th scope="col">菜单名称</th>
          <th scope="col">菜单路径</th>
          <th scope="col">排序</th>
          <th scope="col">操作策略</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>首页</td>
          <td>/dashboard</td>
          <td>1</td>
          <td>READ,UPDATE</td>
          <td>
            <button type="button" class="btn btn-secondary btn-sm px-3"
              @click="openModal('edit')">
              <i class="far fa-edit me-2"></i>编辑
            </button>
            <button type="button" class="btn btn-danger btn-sm px-3 ms-2"
              @click="openModal('delete')">
              <i class="far fa-trash-alt me-2"></i> 删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>
  </div>
  <EditAddModal v-model:show="showEditAddModal" :msg="msg" :schema="formSchema" @submit="editSubmit"></EditAddModal>
  <DeleteModal v-model:show="showDeleteModal" @delete="deleteSubmit" :msg="'确认删除该菜单吗？'"></DeleteModal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

import EditAddModal from '@/components/modal/EditAddModal.vue';
import DeleteModal from '@/components/modal/DeleteModal.vue';
import { FormItem } from '@/components/Form.vue';

export default defineComponent({
  components: {
    EditAddModal,
    DeleteModal
  },
  setup() {
    const showEditAddModal = ref(false)
    const showDeleteModal = ref(false)

    const msg = ref('新增' as ('编辑' | '新增'));
    // let localType: string = '';


    const formSchema = [
      {
        field: '菜单名称',
        type: 'input',
        prop: 'menuName',
        value: '',
        attr: {
          placeholder: '请输入菜单名称',
        }
      },
      {
        field: '菜单路径',
        type: 'input',
        prop: 'menuPath',
        value: '',
        attr: {
          placeholder: '请输入菜单路径',
        }
      },
      {
        field: '菜单排序',
        type: 'input',
        prop: 'sort',
        value: '',
        attr: {
          placeholder: '请输入菜单排序',
        }
      },
      {
        field: '操作策略',
        type: 'checkbox',
        prop: 'roles',
        value: [],
        children: [
          {
            value: 1,
            field: 'READ'
          },
          {
            value: 2,
            field: 'CREATE'
          },
          {
            value: 3,
            field: 'UPDATE'
          },
          {
            value: 4,
            field: 'DELETE'
          },
          {
            value: 5,
            field: 'MANAGE'
          },
        ]
      },
    ] as FormItem[]

    const openModal = (type: string) => {
      // localType = type
      // tmpItem.value = item || {} as UserItem;
      if (type === 'delete') {
        // deleteModal.value.show();
        showDeleteModal.value = true;
      } else if (type === 'edit') {
        msg.value = '编辑';
        // Object.assign(formValue, tmpItem.value)
        // formValue.roles = tmpItem.value.roles.map(o => o.id)
        // console.log("🚀 ~ openModal ~ formValue:", formValue)
        // editAndAddModal.value.show();
        showEditAddModal.value = true;
      } else if (type === 'add') {
        msg.value = '新增';
        // editAndAddModal.value.show();
        showEditAddModal.value = true;
      }
    }

    const editSubmit = async (val: any) => {
      console.log(val);
    }


    const deleteSubmit = async () => {}


    return {
      formSchema,
      msg,
      openModal,
      showEditAddModal,
      showDeleteModal,
      editSubmit,
      deleteSubmit,
      deleteHandler: () => { showDeleteModal.value = true },
    }
  }
})
</script>

<style scoped></style>
